@import "~common/css/_variables.scss";

.video_detail {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;


  .video_scroll {
    width: 100%;
    height: 100%;

    .scroll_box {
      display: flex;
      padding: 0 16px;
      width: 1020px;
      margin: 0 auto;
      justify-content: space-between;
      height: 1000vh;

      .video_left {
        float: left;
        width: 640px;
        padding-left: 16px;

        .video_box {
          min-width: 60%;
          width: 100%;
          height: 354px;

          video {
            width: 100%;
            height: 100%;
            background-color: #000;
            padding-bottom: 40px;

            &.video_fixed {
              position: fixed;
              bottom: 30px;
              right: 30px;
              min-width: 300px;
              width: 300px !important;
              height: auto !important;
            }
          }
        }

        .video_info {
          min-width: 60%;
          width: 100%;

          .user_info {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            div {
              display: flex;
              align-items: center;
              cursor: pointer;

              img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
              }

              span {
                padding-left: 10px;
                color: $c666;
              }
            }

            p {
              cursor: pointer;
              width: 80px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              color: $cff3a3a;
              border-radius: 30px;
              background-color: #FCF4F4;

              &:hover {
                color: $cfff;
                background-color: $cff3a3a;
              }
            }
          }

          .title {
            margin-top: 30px;
            font-size: $fz22;
            font-weight: 600;
          }

          .play_time {
            margin-top: 20px;
            display: flex;
            color: $c999;

            p {
              &:last-child {
                margin-left: 20px;
              }
            }
          }

          .video_tag {
            margin-top: 20px;
            display: flex;

            li {
              display: table;
              line-height: 20px;
              cursor: pointer;
              padding: 0 6px;
              font-size: $fz12;
              margin-right: 6px;
              border-radius: 20px;
              white-space: nowrap;
              background-color: #F7F7F7;
            }
          }

          .tool {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;

            div {
              display: flex;

              button {
                width: 120px;
                height: 32px;
                border-radius: 32px;
                margin-right: 40px;
                background-color: #fff;
                border: 1px solid #D8D8D8;

                &:hover {
                  background-color: #F2F2F2;
                }
              }
            }

            p {
              color: #989898;
              cursor: pointer;
              text-decoration: underline;

              &:hover {
                color: #656565;
              }
            }
          }
        }
      }

      .video_right {
        float: right;
        padding-left: 40px;
        width: calc(100% - 640px);
        max-width: 380px;

        .simi_music {
          margin-top: 50px;
        }
      }

      h3 {
        padding: 16px 0;
        font-size: $fz18;
        font-weight: 600;
      }
    }

  }
}

// 相似视频
.similar {
  ul {
    li {
      display: flex;

      &:not(:first-child) {
        margin-top: 20px;
      }

      img {
        width: 140px;
        height: 80px;
        border-radius: 8px;
        cursor: pointer !important;
      }

      .similarInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 150px;
        padding-left: 10px;

        p {
          font-size: $fz12;
          line-height: 1.2;
          cursor: pointer;

          &:first-child {

            color: #373737;
          }

          &:last-child {
            margin-top: 16px;
            color: #9F9F9F;

            span {
              &:hover {
                color: #373737;
              }
            }
          }
        }
      }
    }
  }
}